<template>
	<view class="all">
		
		<!-- <view class="tit">>>校庆活动参与情况<<</view>
 -->
		 <view class="tr">
			<image src="../../static/images/activity.png" style="width: 90rpx; height: 90rpx;"></image>
			<view class="tit">已参与的校庆活动</view>
		 </view>
		 <view v-if="apply !==undefined && apply.length > 0" style="margin-bottom: 100rpx;">
			<view v-for="(item,index) in apply" :key="index">
				<navigator :url="'../home/Edetail?id='+item.id" >
					<view class="td1">
						<view class="tab1">
							<image class="td" :src="getHeadUrl(item.avatar_url)" style="width: 150rpx; height: 150rpx;"></image>
							<view class="te">{{item.name}}</view>
						</view>
						<view class="tex1">{{toDate(item.start_time)}}至{{toDate(item.end_time)}}</view>
					</view>
				</navigator>
			</view>
		</view>
		<view v-else>
			<view>
				<view class="nothing">暂无校友活动，快去参加吧</view>
			</view>
		</view>
		<navigator url="../home/entity" class="bottom">
					<button class="clik">查看更多活动</button>
		</navigator>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default{
		data()	{
			return	{
				apply:[],
				id:0,
				size:7,
				page:0,
			}
		},
		computed:{
		   ...mapState(['userId', 'token', 'userName', 'wxNickName'])
		},
		onLoad(){			
			uni.request({
					url:app.globalData.URL+'activities/join?userId='+this.userId+'&page='+this.page+'&size='+this.size,
					method:'GET'
				})
			.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				this.apply = res.data;
				console.log("onLoad", this.apply);				
			})			
		},
		onReachBottom:function(){				//当划到最底部的时候触发事件
			console.log("我是最底部了");
			this.getMoreNews();				//到底之后会触发getMoreNews()函数;
			
		},
		methods:{
			getHeadUrl(path){
				if (path == null) {
					return getApp().globalData.Link + 'file/system/默认.jpg';
				} else {
					return getApp().globalData.Link + 'upload/图片/' + path;
				}
			},
			toDate:function(time){
				let date = new Date(time); //获取一个时间对象
				let dateString = date.getFullYear()+'-'+(parseInt(date.getMonth())+1)+'-'+date.getDate();
				//console.log(dateString)
				return dateString;
			},
			getMoreNews:function(){						//数据到底,触发这个函数
				this.page = this.page + 1
				uni.showNavigationBarLoading();		//一读取数据,就进行刷新
				uni.request({
					url:app.globalData.URL+'activities/join?userId='+this.id+'&page='+this.page+'&size='+this.size,
					method:'GET'
				})
				.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				console.log("成功连接!!");
				console.log(this.page);
				console.log("成功连接!!");
				if(res.data==0){
					this.page = this.page - 1
					uni.stopPullDownRefresh();	//数据加载完成,刷新结束
					uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
					return false;
				}
				this.apply=this.apply.concat(res.data)
				console.log(this.apply);
				uni.stopPullDownRefresh();	//数据加载完成,刷新结束
				uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
								
				});
			}
		}
		
	}
</script>

<style>
	.bottom{
		position: fixed;  
		bottom: var(--window-bottom);
		width: 100%;
	}
	.nothing{
		text-align: center;
	}
	.all {
		background-color: #F1F1F1;
	}

.te {
		font-size: 30rpx;
		margin: 20rpx 20rpx;
	}
	.tit {
		color: #007AFF;
		margin: 10rpx 0rpx;
		margin-top: 20rpx;
	}
	.tr {
		display: flex;
		height: 100rpx;
		/* border-bottom: 1rpx solid #007AFF; */
		/* margin-top: 10rpx; */
		/* margin: 10rpx 10rpx; */
		background-color: #FFFFFF;
		text-align: center;
	
	}
	

	.tex1 {
		font-size: 25rpx;
		margin-top: -100rpx;
		margin-left: 210rpx;

	}
	.te1 {
		margin-left: 210rpx;
		font-size: 25rpx;
		margin-top: 20rpx;
		color: #808080;
	}
	
	.td1 {
		border-bottom: 1px solid #CCCCCC;
		margin-bottom: 20rpx;
	}
	
	.te2 {
		margin-left: 550rpx;
		font-size: 25rpx;
		margin-top: -30rpx;
		color: #808080;
	}
	.clik {
		background-color: #FFFFFF;
		width: 100%;
		color: #255BBA;
		border: 2rpx solid #255BBA;
		margin-top: 30rpx;
	}
	.tab1 {
		/* margin-top: 10rpx; */
		height: auto;
		background-color: #FFFFFF;
		margin-top: 10rpx;
		/* height: 180rpx; */
		display: flex;
		border-bottom: 1px solid #D6D4D4;
	}
	
	.all {
		background-color: #F1F1F1;
		height: auto;
	}
	
	.td {
		/* width: 95%; */
		/* background-color: #FFFFFF; */
		margin: 20rpx 20rpx;
		border-radius: 2%;
		margin-top: 10rpx;
	
	}
</style>
